<template>
  <u-gap height="1" bgColor="rgba(138,138,138,0.35)"> </u-gap>

  <view style="padding-top: 30rpx">
    <text style="color: #9a9a9a;font-size: 14px;padding: 30rpx">我的名字</text>
    <view style="padding: 30rpx">
      <u-input v-model="username" :focus="true" type="text" border="none" :clearable="true" :showWordLimit="true" maxlength="20"></u-input>
    </view>
    <u-gap height="1" bgColor="rgba(138,138,138,0.15)"> </u-gap>
    <view style="float: right;padding: 15rpx 30rpx;font-size: 12px;color:rgba(0,0,0,0.47);">
      {{username.length + '/' + 20}}
    </view>
    <view style="display: flex;align-items: center;
    justify-content: center;padding: 55vh 20vw 20vh 35vw;">
      <u-button  shape="circle"
                 size="large" @tap="alterUserName"
                 :disabled="username.trim() == '' || username == origin"
                 color="#ea4757">保存</u-button>
    </view>
  </view>
</template>

<script>
import user from "@/store/user";
import {alterFrontUsername} from "@/api/user";

export default {
  data() {
    return {
      username:'',
      origin: '',
    };
  },
  onLoad(options) {
    console.log(options.username)
    this.username = options.username
    this.origin = options.username
  },
  methods: {
    async alterUserName(){
      if(this.username.trim() == ''){
        uni.showToast({
          title: '请先输入',
          icon: 'none'
        })
      }
      if(this.username === this.origin){
        uni.showToast({
          title: '不能与原名相同',
          icon: 'none'
        })
        return
      }

      let data = {
        username: this.username
      }

     const res = await alterFrontUsername(this.username)
      if(res.code == 200){
        uni.showToast({
          title: '修改成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1000)
      }else {
        uni.showToast({
          title: '修改失败',
          icon: 'none',
          position: 'bottom'
        })
      }
    }
  },
}
</script>

<style lang="scss">

</style>
